<template>
  <el-form>
    <el-form-item label="用户">
      <el-select
          v-model="searchVO.userId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="loadUsers"
          :loading="loading"
      >
        <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
        />
        <el-option v-if="userSearchVO.finish" disabled label="没有更多了" value="xxx"/>
        <el-button v-else @click="loadUsers('')">下一页</el-button>
      </el-select>
    </el-form-item>
    <el-form-item label="关键词">
      <el-input placeholder="请输入关键词" style="width: 150px" v-model="searchVO.keyword"></el-input>
    </el-form-item>
    <el-form-item label="类型">
      <el-select v-model="searchVO.type" placeholder="请选择类型">
        <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
          v-model="searchVO.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      />
    </el-form-item>
    <el-form-item>
      <el-button
          type="primary"
          @click="handleQuery"
      >
        <el-icon style="margin-right: 5px">
          <Search/>
        </el-icon>
        搜索
      </el-button>
      <el-button
          @click="resetQuery"
      >
        <el-icon style="margin-right: 5px">
          <Refresh/>
        </el-icon>
        重置
      </el-button>
    </el-form-item>
  </el-form>
  <el-table :data="pageInfo.list" style="width: 100%">
    <el-table-column prop="userId" label="用户ID" width="180"/>
    <el-table-column prop="nickName" label="用户昵称" width="180"/>
    <el-table-column prop="gender" label="用户性别"/>
    <el-table-column label="头像">
      <template #default="scope">
        <el-avatar shape="square" :src="scope.row.avatar"></el-avatar>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="searchVO.pageNum"
      :page-size="searchVO.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="loadData"
      @size-change="handleSizeChange"

      :total="pageInfo.total"
  >
  </el-pagination>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import {SearchVO, User} from "@/typings";
import {listUser} from "@/api/system/user";
import {listUnit} from "@/api/post/unit";

export default defineComponent({
  data() {
    return {
      pageInfo: {
        list: [] as User[],
        pages: 1,
      },
      searchVO: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
      } as SearchVO,
      userSearchVO: {
        keyword: '',
        pageNum:1,
        pageSize:10,
        finish: false
      } as SearchVO,
      userList: [] as User[],
      loading: false,
      typeList: [
        {label: '', value: ''}
      ]
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      listUnit(this.searchVO).then(res => {
        this.pageInfo = res
      })
    },
    handleQuery() {
      this.loadData()
    },
    handleSizeChange(val: number) {
      this.searchVO.pageSize = val
    },
    resetQuery() {
      this.searchVO = {
        userId: undefined,
        type: undefined,
        startTime: undefined,
        endTime: undefined,
        timeRange: undefined,
        keyword: undefined,
        pageNum: 1,
        pageSize: 10
      }
    },
    loadUsers(keyword) {
      if (keyword) {
        //新的关键词需要重置 pageNum和finish
        if (keyword !== this.userSearchVO.keyword) {
          this.userSearchVO.pageNum = 1
          this.userSearchVO.finish = false
          this.userList = []
        }
        this.userSearchVO.keyword = keyword
      }
      if (!this.searchVO.finish) {
        this.loading = true
        listUser(this.userSearchVO).then(res => {
          if (res.list.length < this.userSearchVO.pageSize) {
            this.userSearchVO.finish = true
          }
          this.loading = false
          this.userList.push(...res.data.data.list)
          this.userSearchVO.pageNum++
        })
      }
    },
  }
})
</script>
<style lang="scss" scoped>

</style>